<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			#update_icon {
				width: 50px;
				height: 50px;
				line-height: 72px;
				background-color: #418FFF;
				text-align: center;
				border-radius: 50%;
				position: fixed;
				right: 20px;
				bottom: 20px;
			}
			
			#sheet1 .mui-table-view {
				margin: 0;
				border-radius: 0;
				text-align: left;
				color: #000;
				left: -10px;
			}
			
			#icon-list li {
				width: 50px;
				float: left;
				text-align: center;
				font-size: 14px;
				margin: 0 10px 5px 10px;
				padding-top: 10px;
			}
			
			.icon-border {
				display: block;
				width: 50px;
				height: 50px;
				border: 1px solid #B3B3B3;
				border-radius: 50%;
				vertical-align: middle;
				line-height: 60px;
				margin-bottom: 10px;
			}
			
			.icon-border img {
				width: 24px;
			}
			
			#note_name {
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.share {
				position: absolute;
				left: 270px;
			}
			
			.a1 {
				position: relative;
				margin-left: -14px;
				top: 39px;
				left: -26px;
				font-size: 10px;
			}
			
			.share1 {
				width: 296px;
				height: 70px;
				position: relative;
				left: 60px;
			}
			#textarea{
				margin-left: 15px;
			}
		</style>
	</head>

	<body>
		<!--头部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #000;"></a>
			<a class="share open-popup" data-target="#half"><span class="mui-icon mui-icon-redo" onclick="openShare()"></span></a>
			<a class="mui-icon mui-icon-more-filled" href="#sheet1" style="color: #000;float: right;"></a>
		</header>
		<!--标题-->
		<div class="mui-input-row">
			<input type="text" class="mui-input" readonly="readonly" style="border: none;margin-bottom: 0;" id="note_title">
		</div>
		<!--文本内容-->
		<div class="mui-input-row" style="overflow-y: visible;">
			<!--<textarea id="textarea" readonly="readonly" rows="30" style="border: none;font-size: 14px;">
			</textarea>-->
			<div id="textarea"></div>
			<!--<div contenteditable="true" id="textarea" readonly="readonly" style="border: none;font-size: 14px; height: 200px;"></div>-->
		</div>
		</div>
		<!--更新按钮-->
		<a id="update_icon" href="#">
			<span>
				<svg t="1576739996022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7538" width="32" height="32"><path d="M375.204 655.196l193.168-54.843-137.975-137.131-55.193 191.973zM891.13 279.565l-137.977-137.134-303.553 301.685 137.975 137.12 303.554-301.671zM850.922 787.383c0 47.649-38.641 86.307-86.305 86.307h-517.85c-47.677 0-86.308-38.658-86.308-86.307v-517.851c0-47.677 38.631-86.307 86.308-86.307h345.232l86.309-86.309h-460.31c-79.453 0-143.846 64.394-143.846 143.847v575.388c0 79.455 64.395 143.846 143.846 143.846h575.388c79.439 0 143.846-64.394 143.846-143.846v-460.311l-86.31 86.309v345.234zM955.258 164.372l-86.24-85.703c-14.288-14.203-38.224-13.429-53.466 1.713l-41.399 41.132 137.978 137.133 41.397-41.145c15.242-15.143 16.015-38.926 1.73-53.13z" p-id="7539" fill="#ffffff"></path></svg>
			</span>
		</a>
		<!--底部弹框-->
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<div class="mui-table-view" id="note_name">
				<span>标题.note</span>
				<i class="fa fa-edit" aria-hidden="true" id="prompt" style="float: right; line-height: 30px;"></i>
			</div>
			<div class="mui-table-view">
				<ul id="icon-list">
					<li id="encryption">
						<span class="icon-border">
							<img src="img/top1.png"/>
						</span> 加密
					</li>
					<li>
						<input type="hidden" id="starid" />
						<span class="icon-border" id="star">
							<img src="img/star1.png"/>
						</span> 加星
					</li>
					<li>
						<span class="icon-border" id="top">
							<img src="img/top1.png"/>
						</span> 置顶
					</li>
					<li>
						<span class="icon-border">
							<img src="img/label1.png"/>
						</span> 标签
					</li>
					<li>
						<span class="icon-border">
							<img src="img/refresh.png"/>
						</span> 刷新
					</li>
				</ul>
			</div>
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">纸张背景</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="update_history.html">修改历史</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="note_information.html">详细信息</a>
					<span style="font-size: 14px;color: #CCC;">大小:<span>212</span>B 字数：<span>3</span></span>
				</li>
				<li class="mui-table-view-cell">
					<a href="move.html">移动</a>
				</li>
				<li class="mui-table-view-cell" id="del">
					<a href="#">删除</a>
				</li>
			</ul>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				//返回父页面刷新
				beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
					//refresh是父页面自定义事件
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});

			//执行刷新刷新页面
			window.addEventListener('refresh', function(e) {
				location.reload();
			});
			//跳转修改笔记的页面
			$("#update_icon").click(function() {
				mui.openWindow({
					url: 'update_note.html',
					id: 'update_note',
					extras: {
						ids: $('#starid').val(),
						notesName: $('#note_title').val(),
						content: $('#textarea').html()
					}
				})
			})

			$(document).on("open", ".weui-popup-modal", function() {
				console.log("open popup");
			}).on("close", ".weui-popup-modal", function() {
				console.log("close popup");
			});

			//获得加星页面传过来的数据
			var userid;
			var myUrl1;
			mui.plusReady(function() {
				userid = plus.storage.getItem("accessToken");
				myUrl1 = plus.storage.getItem("myUrl1");
				var self = plus.webview.currentWebview();
				$('#starid').val(self.ids)
				$.ajax({
					type: "get",
					url: "" + myUrl1 + "/note-star/notes/findNote",
					data: {
						id: self.ids,
						token: userid
					},
					dataType: 'json',
					success: function(d) {
						$('#note_title').val(d.notesName);
						$('#textarea').html(d.content);
						/*$('#textarea').val(d.content);*/
						if(d.favorite == '2') {
							$('#star>img').attr("src", "img/star.png")
						} else {
							$('#star>img').attr("src", "img/star1.png")
						}
					}
				})
			});

			//文件加星
			$('#star>img').click(function() {
				if($(this).attr("src") == "img/star1.png") {
					$(this).attr("src", "img/star.png")
					mui.toast('文件已加星');
					//修改加星的状态
					$.ajax({
						type: "get",
						url: "" + myUrl1 + "/note-star/notes/updateStar",
						data: {
							id: $('#starid').val(),
							favorite: "2",
							token: userid
						},
						dataType: 'json',
						success: function(d) {

						}
					});
				} else {
					$(this).attr("src", "img/star1.png")
					mui.toast('加星已取消');
					//修改加星的状态
					$.ajax({
						url: "" + myUrl1 + "/note-star/notes/updateStar",
						type: "get",
						data: {
							id: $('#starid').val(),
							favorite: "1",
							token: userid
						},
						dataType: 'json',
						success: function(d) {

						}
					});
				}
			})

			//文件置顶
			$('#top>img').click(function() {

				if($(this).attr("src") == "img/top1.png") {
					$(this).attr("src", "img/top.png")
					document.getElementById("top").addEventListener('tap', function() {
						mui.toast('置顶已取消');
					});
					//修改置顶的状态
					$.ajax({
						type: "get",
						url: "",
						data: '',
						dataType: 'json',
						success: function(d) {

						}
					});
				} else {
					$(this).attr("src", "img/top1.png")
					document.getElementById("top").addEventListener('tap', function() {
						mui.toast('已置顶文件');
					});
					//修改置顶的状态
					$.ajax({
						type: "get",
						url: "",
						data: '',
						dataType: 'json',
						success: function(d) {

						}
					});
				}
			})

			//删除
			document.getElementById("del").addEventListener('tap', function() {
				document.getElementById("sheet1").style.display = "none"
				var btnArray = ['取消', '确定'];
				mui.confirm('确认删除？', '删除后无法恢复', btnArray, function(e) {
					if(e.index == 1) {
						window.location.href = "tabbar.html"
					} else {
						document.getElementById("sheet1").style.display = "block"
					}
				})
			});

			//重命名
			document.getElementById("prompt").addEventListener('tap', function(e) {
				document.getElementById("sheet1").style.display = "none"
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('', '标题.note', '重命名：', btnArray, function(e) {
					if(e.index == 1) {
						window.location.href = "show_note.html"
					} else {
						document.getElementById("sheet1").style.display = "block"
					}

				})
			});

			//笔记加密
			document.getElementById("encryption").addEventListener('tap', function() {
				document.getElementById("sheet1").style.display = "none"
				var btnArray = ['取消', '确定'];
				mui.confirm('首次启用需设置密码', '设置成功后，该文件需要密码才能访问，确定加密吗？', btnArray, function(e) {
					if(e.index == 1) {
						window.location.href = "encryption.html"
					} else {
						document.getElementById("sheet1").style.display = "block"
					}
				})
			});
		</script>
		<!--分享功能-->
		<script type="text/javascript">
			function openShare() {
				shareWebview();
			}
			var sharew;
			var ws = null;

			function shareWebview() {
				ws = plus.webview.currentWebview();
				if(sharew) { // 避免快速多次点击创建多个窗口
					return;
				}
				var nodeId = "1"
				var top = plus.display.resolutionHeight - 160;
				var href = "share.html";
				var shareLink = "http://5a81bc55.cpolar.io/share/copysharePage?id=" + nodeId;
				sharew = plus.webview.create(href, "share.html", {
					width: '100%',
					height: '160',
					top: top,
					scrollIndicator: 'none',
					scalable: false,
					popGesture: 'none'
				}, {
					shareInfo: {
						"href": shareLink, //笔记链接
						"title": "【byte笔记】超实用的笔记APP",
						"content": "hello！给你分享一份超牛逼的笔记",
						"pageSourceId": ws.id
					}
				});
				sharew.addEventListener("loaded", function() {
					sharew.show('slide-in-bottom', 300);
				}, false);
				// 显示遮罩层  
				ws.setStyle({
					mask: "rgba(0,0,0,0.5)"
				});
				// 点击关闭遮罩层
				ws.addEventListener("maskClick", closeMask, false);
			}

			function closeMask() {
				ws.setStyle({
					mask: "none"
				});
				//避免出现特殊情况，确保分享页面在初始化时关闭 
				if(!sharew) {
					sharew = plus.webview.getWebviewById("share.html");
				}
				if(sharew) {
					sharew.close();
					sharew = null;
				}
			}
		</script>
	</body>

</html>